<template>
  <view>
    <modal @closeModal="changeModal" :visible="loginModal">
      <view class="login_tip">请您登录</view>
      <uni-forms class="login-form">
        <!-- 登录框 (选择手机号所属国家和地区需要另行实现) -->
        <uni-easyinput
          type="number"
          class="input-box"
          :inputBorder="false"
          v-model="phone"
          maxlength="11"
          placeholder="请输入您的手机号"
          :placeholderStyle="placeholderStyle"
        >
        </uni-easyinput>
        <view class="code-box">
          <uni-easyinput
            type="number"
            class="input-box"
            :inputBorder="false"
            v-model="code"
            maxlength="6"
            placeholder="请输入验证码"
            :placeholderStyle="placeholderStyle"
          >
          </uni-easyinput>
          <view class="short-code-btn" hover-class="hover" @click="start">
            <text
              class="inner-text"
              :class="reverseNumber == 0 ? 'inner-text-active' : ''"
              >{{ innerText }}</text
            >
          </view>
        </view>
        <view class="tip">未注册的手机号验证通过后将自动注册</view>
        <!-- <button
          :class="['send-btn', canLogin ? 'warn' : '']"
          :disabled="!canLogin"
          :type="canLogin ? 'warn' : 'default'"
          @click="login"
        >
          <span v-if="!loading">登 录</span>
          <span v-else>登 录 中...</span>
        </button> -->
        <view @click="login" :class="['login_btn', canLogin ? 'warn' : '']"
          >登录</view
        >
      </uni-forms>
    </modal>
    <!-- 退出登录/修改生辰 -->
    <optionModal
      v-if="visible"
      :birthDay="birthDay"
      :visible="visible"
      @closeModal="closeModal"
    ></optionModal>
  </view>
</template>

<script>
import { getSmsCodeApi, createYpOrdersApi } from "@/http/api";
import optionModal from "./components/optionModal.vue";
import modal from "@/components/modal/modal.vue";

export default {
  components: {
    optionModal,
    modal,
  },
  props: {
    loginModal: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      birthDay: "",
      visible: false,
      placeholderStyle: "font-size:28rpx",
      phone: "",
      code: "",
      id: "",
      count: 60,
      reverseNumber: 0,
      reverseTimer: null,
      loading: false,
    };
  },
  computed: {
    canLogin() {
      return this.code.length == 6;
    },
    innerText() {
      if (this.reverseNumber == 0) return "获取验证码";
      return "重新发送" + "(" + this.reverseNumber + "s)";
    },
  },
  created() {
    this.initClick();
  },
  methods: {
    closeModal() {
      this.visible = !this.visible;
    },
    changeModal() {
      this.$emit("closeModal");
    },

    backHome() {
      uni.switchTab({
        url: "/pages/index/index",
      });
    },
    backHistory() {
      uni.navigateBack();
    },
    initClick() {
      this.start = this.$_.throttle(
        () => {
          if (this.reverseNumber != 0) return;
          this.sendMsg();
        },
        500,
        1
      );
    },
    // 手机号验证
    validatePhone() {
      var reg =
        /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/;
      if (!reg.test(this.phone)) {
        uni.showToast({
          title: "请输入正确的手机号",
          icon: "none",
        });
        return false;
      }
      return true;
    },
    sendMsg() {
      if (this.validatePhone()) {
        // 调用短信接口
        this.reverseNumber = Number(this.count);
        this.getCode();
        getSmsCodeApi(this.phone).then((res) => {
          if (res.code === 200) {
            this.id = res.uuid;
            uni.showToast({
              title: res.msg,
              icon: "none",
            });
          }
        });
      }
    },
    getCode() {
      if (this.reverseNumber == 0) {
        clearTimeout(this.reverseTimer);
        this.reverseTimer = null;
        return;
      }
      this.reverseNumber--;
      this.reverseTimer = setTimeout(() => {
        this.getCode();
      }, 1000);
    },
    // 登录
    login() {
      if (this.validatePhone()) {
        this.loading = true;
        let param = {
          code: "",
          password: "",
          phone: this.phone,
          smscode: this.code,
          username: this.phone,
          uuid: this.id,
        };
        wx.showLoading({
          title: "登录中...",
        });
        this.$store
          .dispatch("user/Login", param)
          .then((res) => {
            wx.hideLoading();
            this.birthDay = res.user.birthDay;

            setTimeout(() => {
              this.changeModal();
              //若用户没有生辰信息，则弹出修改生辰信息的弹窗
              if (!res.user.birthDay) {
                this.visible = true;
              } else {
                window.location.reload();
              }
              this.loading = false;
            }, 500);
          })
          .catch((err) => {
            this.loading = false;
            uni.showToast({
              title: err.msg,
              icon: "none",
            });
          });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
view {
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
}
.content {
  max-width: 100%;
  padding: 0 50rpx 0;
  width: 750rpx;
  flex: 1;
}
.login-form {
  padding-top: 35rpx;
}
.input-box {
  padding: 0 15px;
  margin-bottom: 10px;
  background-color: #f8f8f8;
  border-radius: 6px;
  font-size: 28rpx;
}

.short-code-btn {
  width: 240rpx;
  height: 36px;
  background: #f2f2f2;
  box-shadow: 0rpx 0rpx 6rpx 0rpx #e5e5e5;
  margin-left: 24rpx;
  border-radius: 4rpx;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  justify-content: center;
  align-items: center;
}
.inner-text {
  font-size: 28rpx;
  color: #aaaaaa;
}
.inner-text-active {
  color: #c45e04;
}
.tip {
  color: #666666;
  font-size: 24rpx;
  margin: 24rpx 0;
}
.warn {
  color: #fff;
  background-color: #ca4336 !important;
  border: 1px solid #ca4336 !important;
}
.code-box {
  display: flex;
  flex-direction: row;
  .input-box {
    width: 320rpx;
  }
}
.login_btn {
  width: 624rpx;
  height: 71rpx;
  color: #fff;
  background: #e5e5e5;
  border-radius: 12rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login_tip {
  font-size: 28rpx;

  color: #262626;
}
</style>
